<template>

  <div style="height:100%;" id='list'>

    <drawer width="200px;" :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{ background:'rgba(0,0,0,.75)', width: '200px'}">
      <!-- drawer content -->
      <div slot="drawer">
        <group>
          <p v-for="(data,index) in list">
            <a class="" href="javascript:void(0)" @click="goAnchor('#anchor-'+index)"> {{data}} </a>
          </p>
        </group>
      </div>

      <!-- main content -->
      <view-box v-if="!pcOnline" ref="viewBox" scroll-bottom-offset=0 body-padding-top="140px" body-padding-bottom="100">
        <div v-if='pageType!="baoming"' id="x-header">

          <x-header slot="header" :left-options="{backText: ''}" style="width:100%;position:absolute;left:0;top:0;z-index:100;" :title="project" :transition="headerTransition" @on-click-more="onClickMore">
            <a href="./#/racelist" style="font-size:24px" slot="right">
              <i class="fa fa-home fa-fw"></i>
            </a>

          </x-header>

          <myflow v-if='pageType!="baoming"' :stepindex=1></myflow>

          <loading :show='showLoading'></loading>

        </div>

        <scroller lock-x height="-50" ref="scrollerBottom">
          <div>
            <Myheader v-if='pageType=="baoming"' id='type_baoming' :page="page"></Myheader>
            <myflow v-if='pageType=="baoming"' :stepindex=1></myflow>

            <div class="groupWarp" v-show="!showLoading">
              <group>
                <!-- <cell v-for="event in eventList" :key="event.id" :title=event.name link="/disclaimer"
              :disabled="!getState1(event)"
              :inline-desc="getState(event)"
              @click.native="setProject(event.name,event.id,raceid)"></cell> -->
                <checklist :options="commonList" v-model="radioValue" :max="1" @on-change="change"></checklist>
                <Myfooter></Myfooter>
              </group>
            </div>
          </div>
        </scroller>

        <!-- remember to import BusPlugin in main.js if you use components: x-img and sticky -->
        <transition @after-enter="$vux.bus && $vux.bus.$emit('vux:after-view-enter')">
          <router-view class="router-view"></router-view>
        </transition>

        <div class="button_header" id='x-bottom'>
          <x-header slot="header" style="width: 100%;position: fixed;bottom: 0px;z-index: 100;max-width: 850px;margin: 0 auto;" title="" @on-click-title='next'>

            <x-icon @click.native="showMenu=true" slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
            <div slot="right">
              <a class="rightbottom-button" @click='next'>下一步</a>
            </div>
          </x-header>
          <actionsheet @on-click-menu='menuClick' v-model="showMenu" :menus="menus"></actionsheet>
        </div>

      </view-box>

      <view-box v-if="!!pcOnline" ref="viewBox" body-padding-top="140px" body-padding-bottom="50px">
        <div v-if='pageType!="baoming"' id="x-header">

          <x-header slot="header" :left-options="{backText: ''}" style="width:100%;position:absolute;left:0;top:0;z-index:100;" :title="project" :transition="headerTransition" @on-click-more="onClickMore">
            <a href="./#/racelist" style="font-size:24px" slot="right">
              <i class="fa fa-home fa-fw"></i>
            </a>

          </x-header>

          <myflow v-if='pageType!="baoming"' :stepindex=1></myflow>

          <loading :show='showLoading'></loading>

        </div>

        <div>

          <Myheader v-if='pageType=="baoming"' id='type_baoming' :page="page"></Myheader>
          <myflow v-if='pageType=="baoming"' :stepindex=1></myflow>

          <div class="groupWarp" v-show="!showLoading">
            <group>
              <!-- <cell v-for="event in eventList" :key="event.id" :title=event.name link="/disclaimer"
              :disabled="!getState1(event)"
              :inline-desc="getState(event)"
              @click.native="setProject(event.name,event.id,raceid)"></cell> -->
              <checklist :options="commonList" v-model="radioValue" :max="1" @on-change="change"></checklist>
            </group>
          </div>

          <Myfooter></Myfooter>
        </div>

        <!-- remember to import BusPlugin in main.js if you use components: x-img and sticky -->
        <transition @after-enter="$vux.bus && $vux.bus.$emit('vux:after-view-enter')">
          <router-view class="router-view"></router-view>
        </transition>

        <div class="button_header" id='x-bottom'>
          <x-header slot="header" style="width: 100%;position: fixed;bottom: 0px;z-index: 100;max-width: 850px;margin: 0 auto;" title="" @on-click-title='next'>

            <x-icon @click.native="showMenu=true" slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
            <div slot="right">
              <a class="rightbottom-button" @click='next'>下一步</a>
            </div>
          </x-header>
          <actionsheet @on-click-menu='menuClick' v-model="showMenu" :menus="menus"></actionsheet>
        </div>

      </view-box>

    </drawer>

  </div>

</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
const countTime = 5; //倒数计时60秒
const STARTSTR = `进行中`; //进行中提示
const ENDSTR = "已经结束"; //结束提示
const UNSTARTSTR = "尚未开始"; //尚未开始提示

import mixin from "@/common/js/mixin.js";
import Myheader from "@/common/components/myheader.vue";
import Myfooter from "@/common/components/myfooter.vue";
import Myflow from "@/common/components/myflow.vue";
import { cookie } from "vux";

import {
  Scroller,
  Checklist,
  Loading,
  CheckIcon,
  Radio,
  ViewBox,
  XHeader,
  Swiper,
  SwiperItem,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  Flexbox,
  FlexboxItem,
  Card,
  Drawer,
  TransferDomDirective as TransferDom
} from "vux";

import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";

import {
  isIdNumber,
  dateStringToDateTime,
  setTitle,
  timeFormat
} from "@/common/js/main.js";
import { setTimeout } from 'timers';

export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      pcOnline: false,
      raceId: "",
      radioValue: [],
      commonList: [],
      eventList: [],
      showLoading: false,
      isagree: false,
      checkshow: false,
      countTime: countTime,
      list: ["赛事简介", "赛事声明"],
      showModeValue: "overlay",
      drawerVisibility: false,
      showPlacement: "left",
      showPlacementValue: "left",
      demo01_list: [
        {
          url: "javascript:",
          img: "https://static.vux.li/demo/1.jpg",
          title: "2018钦州国际半程马拉松赛暨健康中国马拉松系列赛"
        }
      ]
    };
  },
  computed: {
    headerTransition() {
      if (!this.direction) return "";
      return this.direction === "forward"
        ? "vux-header-fade-in-right"
        : "vux-header-fade-in-left";
    }
  },
  beforeCreate() {},
  created() {
    if (window.localStorage.getItem("pageType") == "baoming") {
      window.localStorage.setItem("raceId", window.pageConfig.raceid);
    }

    //window.localStorage.setItem("disclaimerID",'329');

    //window.localStorage.getItem("raceId");

    if (!!document.title) {
      window.localStorage.setItem("project", document.title);
    }

    //判断手机端还是PC
    if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
      this.pcOnline = false;
    } else {
      this.pcOnline = true;
    }

    if (!!this.page.raceid) {
      window.localStorage.setItem("raceId", this.page.raceid);
    }

    if (!window.localStorage.getItem("raceId")) {
      this.$router.push({ path: "/" });
    }
    //console.log(this.page)

    this.raceId = window.localStorage.getItem("raceId");
    this.project = window.localStorage.getItem("project");
    //setTitle(this.project);

    this.inviteCode = window.localStorage.getItem("invitationCode");
    this.inviteEventId = window.localStorage.getItem("invitationEventId");
    //setTitle(this.project);

    this.timeDate = new Date().valueOf();
    this.getEventList();
    this.pageType = window.localStorage.getItem("pageType") || "baoming";

    // if (window.localStorage.getItem("pageType") == "baoming") {
    //   this.getRaceInfo();
    // }
  },
  mounted() {
    if (this.pageType == "baoming") {
      document.querySelector("#vux_view_box_body").style.paddingTop = "0";
      document.querySelector("#myflow").style.position = "static";
    }
  },
  methods: {
    getRaceInfo() {
      this.axios
        .post(
          `${window.host}race/show`,
          qs.stringify({
            raceid: this.page.raceid
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            window.localStorage.setItem(
              "disclaimerID",
              response.data.data.disclaimer
            );
          }
        });
    },
    getEventList() {
      let _this = this;
      this.axios
        .post(
          `${window.host}race/events`,
          qs.stringify({
            raceid: this.raceId
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            _this.eventList = response.data.data;
            _this.eventList.forEach(function(item, index) {
              _this.commonList.push({
                key: item.id,
                value: item.name,
                inlineDesc: _this.getState(item),
                reg_able: item.reg_able
              });

              setTimeout(() => {
                let array = document.querySelectorAll(
                  ".weui-cells_checkbox label"
                );
                _this.commonList.map((item, index) => {
                  //判断哪些事不能报名的
                  //console.log(index)
                  //console.log(item.key)
                  //console.log(_this.inviteEventId)
                  if (_this.inviteEventId == "null") {
                  } else if (
                    //!item.reg_able
                    !item.reg_able &&
                    item.key != _this.inviteEventId
                  ) {
                    //不能报名
                    array[index].className =
                      "weui-cell weui-check_label disable";
                  }
                });
              }, 0);

              setTimeout(()=>{
                
                _this.$refs.scrollerBottom.reset();
              },3000)

            });
          }
        });
    },
    change(value, label) {
      //console.log(this.radioValue);
      //this.radioValue=radioValue
    },
    getState(a) {
      //console.log(a);
      //console.log(this.inviteCode);
      //console.log(this.inviteEventId);

      if (
        typeof this.inviteCode !== "undefined" &&
        this.inviteEventId == a.id
      ) {
        this.radioValue.push(a.id);
        return "报名中(正在使用邀请码报名)";
      } else if (
        typeof this.inviteCode !== "undefined" &&
        this.inviteEventId == "null"
      ) {
        if (!!a.url || a.url === "0") {
        } else {
          return "报名中(正在使用邀请码报名)";
        }
      }

      let startDate = dateStringToDateTime(a.reg_begin) || null;
      let endDate = dateStringToDateTime(a.reg_end) || null;

      if (!!a.reg_begin) {
        var startTime = timeFormat(a.reg_begin);
      }

      if (!!a.reg_end) {
        var endTime = timeFormat(a.reg_end) || null;
      }

      if (!a.reg_begin && !a.reg_end) {
        //没有开始时间 没有结束时间  不设置限制
        if (a.state == "audit") {
          return STARTSTR + "，需要审核";
        } else if (a.state == "draw") {
          return STARTSTR + "，需要抽签";
        } else if (a.state == "normal") {
          if (a.remain <= 0) {
            if (a.allow_wait == 0) {
              return "已经报满了";
            } else if (a.allow_wait >= 1) {
              return "候补中，有 " + a.wait_count + " 人在候补";
            }
          } else {
            return STARTSTR;
          }
        }

        return STARTSTR;
      } else if (!a.reg_begin && a.reg_end) {
        //只有结束时间
        if (this.timeDate >= endDate) {
          //大于结束时间 返回已经结束
          return ENDSTR + "(报名截止时间:" + endTime + ")";
        } else {
          //小于结束时间 返回进行中
          if (a.state == "audit") {
            return STARTSTR + "，需要审核";
          } else if (a.state == "draw") {
            return STARTSTR + "，需要抽签";
          } else if (a.state == "normal") {
            if (a.remain <= 0) {
              if (a.allow_wait == 0) {
                return "已经报满了";
              } else if (a.allow_wait >= 1) {
                return "候补中，有 " + a.wait_count + " 人在候补";
              }
            } else {
              return STARTSTR;
            }
          }

          return STARTSTR;
        }
      } else if (a.reg_begin && !a.reg_end) {
        //只有开始时间
        if (this.timeDate >= startDate) {
          //大于开始时间 返回进行中
          if (a.state == "audit") {
            return "报名中，需要审核";
          } else if (a.state == "draw") {
            return "报名中，需要抽签";
          } else if (a.state == "normal") {
            if (a.remain <= 0) {
              if (a.allow_wait == 0) {
                return "已经报满了";
              } else if (a.allow_wait >= 1) {
                return "候补中，有 " + a.wait_count + " 人在候补";
              }
            } else {
              return STARTSTR;
            }
          }

          return STARTSTR;
        } else {
          //小于开始时间 返回还未开始
          return UNSTARTSTR + "(开始时间:" + startTime + ")";
        }
      } else if (a.reg_begin && a.reg_end) {
        //正常状态，有开始和结束时间
        // if (this.timeDate >= endDate) {
        //   return ENDSTR;
        // } else if (this.timeDate <= startDate) {
        //   return UNSTARTSTR;
        // }
        // return STARTSTR
        //只有开始时间
        //console.log(this.timeDate);
        if (this.timeDate <= startDate) {
          //当前时间小于开始时间 还没开始
          return UNSTARTSTR + "(开始时间:" + startTime + ")";
        } else if (this.timeDate >= endDate) {
          //当前时间大于结束事时间 已经结束
          return ENDSTR + "(截止时间:" + endTime + ")";
        } else {
          if (a.state == "audit") {
            return STARTSTR + "，需要审核";
          } else if (a.state == "draw") {
            return STARTSTR + "，需要抽签";
          } else if (a.state == "normal") {
            if (a.remain <= 0) {
              if (a.allow_wait == 0) {
                return "已经报满了";
              } else if (a.allow_wait >= 1) {
                return "候补中，有 " + a.wait_count + " 人在候补";
              }
            } else {
              return STARTSTR;
            }
          }
          return STARTSTR;
        }
      }
    },
    next() {
      let _this = this;
      if (!this.radioValue[0]) {
        this.$vux.toast.show({
          type: "text",
          text: "请先选择比赛项目"
        });
        return;
      }
      //如果有邀请码且邀请的项目跟报名的项目不相等 就删除邀请码

      // if (
      //   !!window.localStorage.getItem("invitationEventId") &&
      //   this.radioValue[0] != window.localStorage.getItem("invitationEventId")
      // ) {
      //   window.localStorage.removeItem("invitationEventId");
      //   window.localStorage.removeItem("invitationCode");
      // }

      _this.eventList.map((item, index) => {
        //console.log(item);
        //return;

        if (item.id === this.radioValue[0] && item.team == 1) {
          //团队报名
          //设置项目id
          window.localStorage.setItem("eventId", this.radioValue[0]);
          window.localStorage.setItem("invitationEventName", item.name);
          window.localStorage.setItem("invitationEventId", item.id);
          _this.$router.push({
            path: "/teamlist",
            query: {
              max: item.team_max
            }
          });
        } else if (item.id === this.radioValue[0] && item.team == 0) {
          //非团队报名
          //设置项目id
          window.localStorage.setItem("eventId", this.radioValue[0]);
          window.localStorage.setItem("invitationEventName", item.name);
          window.localStorage.setItem("invitationEventId", item.id);

          if (!!item.url && item.url != "0") {
            window.location.href = item.url;
          } else {
            _this.$router.push({ path: "disclaimer" });
          }
        }
      });
    },
    countDown() {
      let _this = this;
      let countDown = setInterval(function() {
        //console.log(_this.codeMessage)
        if (_this.countTime <= 1) {
          _this.checkshow = true;
          clearInterval(countDown);
          return;
        }
        _this.countTime--;
      }, 1000);
    },
    goAnchor(selector) {
      this.drawerVisibility = false;
      var anchor = this.$el.querySelector(selector);
      document.querySelector("#vux_view_box_body").scrollTop =
        anchor.offsetTop - 60;
    },
    onClickMore() {
      this.drawerVisibility = true;
    },
    onShowModeChange(val) {
      /** hide drawer before changing showMode **/
      this.drawerVisibility = false;
      setTimeout(one => {
        this.showModeValue = val;
      }, 400);
    },
    onPlacementChange(val) {
      /** hide drawer before changing position **/
      this.drawerVisibility = false;
      setTimeout(one => {
        this.showPlacementValue = val;
      }, 400);
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Myfooter,
    Scroller,
    Checklist,
    Loading,
    CheckIcon,
    Myflow,
    Radio,
    ViewBox,
    XHeader,
    Swiper,
    SwiperItem,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Confirm,
    Flexbox,
    Card,
    Drawer,
    FlexboxItem
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
body,
html {
  height: 100%;
}

.flexwrapper {
  .flex-demo {
    width: 90%;
    background-clip: padding-box;
    margin-top: 10px;
    img {
      width: 100%;
    }
  }
  .content {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 70px;

    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      color: black;
      margin: 10px 0 10px 0;
      line-height: 1.2;
    }
    .time {
      font-size: 12px;
      color: #2179cc;
      margin-bottom: 10px;
    }
  }
  .button {
    height: 34px;
    line-height: 34px;
  }

  a {
    touch-action: none;
  }
}

#signup .weui-panel {
  margin-top: 0;
}

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}

body {
  background-color: #fbf9fe;
}
html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
.demo-icon-22 {
  font-family: "vux-demo";
  font-size: 22px;
  color: #888;
}
.weui-tabbar.vux-demo-tabbar {
  /** backdrop-filter: blur(10px);
  background-color: none;
  background: rgba(247, 247, 250, 0.5);**/
}
.vux-demo-tabbar .weui-bar__item_on .demo-icon-22 {
  color: #f70968;
}
.vux-demo-tabbar
  .weui-tabbar_item.weui-bar__item_on
  .vux-demo-tabbar-icon-home {
  color: rgb(53, 73, 94);
}
.demo-icon-22:before {
  content: attr(icon);
}
.vux-demo-tabbar-component {
  background-color: #f70968;
  color: #fff;
  border-radius: 7px;
  padding: 0 4px;
  line-height: 14px;
}
.weui-tabbar__icon + .weui-tabbar__label {
  margin-top: 0 !important;
}
.vux-demo-header-box {
  z-index: 100;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
@font-face {
  font-family: "vux-demo"; /* project id 70323 */
  src: url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.eot");
  src: url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.eot?#iefix")
      format("embedded-opentype"),
    url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.woff") format("woff"),
    url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.ttf") format("truetype"),
    url("https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.svg#iconfont")
      format("svg");
}
.demo-icon {
  font-family: "vux-demo";
  font-size: 20px;
  color: #04be02;
}
.demo-icon-big {
  font-size: 28px;
}
.demo-icon:before {
  content: attr(icon);
}
.router-view {
  width: 100%;
  top: 46px;
}

#signup .vux-no-group-title {
  margin-top: 0;
}

.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  height: 100%;
  top: 46px;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.menu-title {
  color: #888;
}

.footerBanner {
  margin-bottom: 0px;
}

#content ul li {
  height: 100vh;
}

#myflow {
  width: 100%;
  top: 47px;
  position: absolute;
  background: #fcf9fe;
  z-index: 999;
}

#x-bottom .vux-header .vux-header-left {
  position: absolute;
  top: 17px;
  display: block;
  font-size: 14px;
  line-height: 14px;
  color: #ccc;
  height: 25px;
  overflow: hidden;
}
.disable {
  color: #b2b2b2;
  pointer-events: none;
}

#list .vux-header .vux-header-title {
  font-size: 18px;
}

#list #type_baoming {
  img {
    max-width: 100%;
  }
}

body .ad {
  display: block;
}
</style>






